Reactアプリでサウンドを鳴らしてみた（use-sound 前編）

#React

若槻龍太

2021.09.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

今回はuse-soundを使用してReactアプリでボタンクリック時にサウンドを鳴らしてみた、の前編です。

use-soundとは

use-soundを使用すればReactアプリケーションで音楽を再生したり、操作に応じて効果音を鳴らしたりする実装を行うことができます。

use-sound - npm

また前回のエントリで紹介したreact-soundと比べてメンテが活発に行われており、Reactの最新バージョンである17にも対応しています。

やってみた

普通にサウンドを鳴らす

デモ

ボタンをクリックするとサウンド再生できます。また再生中に停止とポーズもできます。

コード概要

use-soundはReact Hookとして使用できるパッケージであるため、簡潔なコードでサウンド再生機能をアプリに追加できます。

import React from 'react';
import useSound from 'use-sound';
import Sound from './決定、ボタン押下4.mp3';
import './styles.css';

export const App: React.FC = () => {
  const [play, { stop, pause }] = useSound(Sound);

  return (
    <>
      <button onClick={() => play()}>音を鳴らす</button>
      <button onClick={() => stop()}>停止</button>
      <button onClick={() => pause()}>ポーズ</button>
    </>
  );
};

サウンドの音量を変える

デモ

押したボタンによって異なる音量のサウンドが鳴ります。

コード概要

volumeを0から1の範囲で指定して同じサウンドデータの音量を変えることができます。既定は1です。ミュートは0です。

export const App: React.FC = () => {
  const [playLoud] = useSound(Sound, { volume: 1 });
  const [playSoft] = useSound(Sound, { volume: 0.7 });
  const [playWhisper] = useSound(Sound, { volume: 0.3 });

  return (
    <>
      <button onClick={() => playLoud()}>
        音を鳴らす（大）
      </button>
      <button onClick={() => playSoft()}>
        音を鳴らす（中）
      </button>
      <button onClick={() => playWhisper()}>
        音を鳴らす（小）
      </button>
    </>
  );
};

サウンドの再生スピードを変える

デモ

押したボタンによってサウンドの再生スピートが異なります。

コード概要

playbackRateを4から0.5の範囲で指定した倍速で再生スピードを変えることができます。

export const App: React.FC = () => {
  const [playFast] = useSound(Sound, { playbackRate: 2 });
  const [play] = useSound(Sound, { playbackRate: 1 });
  const [playSlow] = useSound(Sound, {
    playbackRate: 0.5
  });

  return (
    <>
      <button onClick={() => playFast()}>
        音を鳴らす（2倍速）
      </button>
      <button onClick={() => play()}>
        音を鳴らす（中）
      </button>
      <button onClick={() => playSlow()}>
        音を鳴らす（0.5倍速）
      </button>
    </>
  );
};